<template>
  <view class="TabPopup">
    <view class="TabTitle" @click="showOptions">
      {{ options[currentIndex] }}
      <image
        src="../../../static/icons/arrow.png"
        :class="['arrowIcon', showOptionsFlag ? 'arrowActive' : '']"
      ></image>
    </view>
    <view :class="['optionsContainer', showOptionsFlag ? 'optionsShow' : '']">
      <view class="topArrow"></view>
      <view
        class="item"
        v-for="(item, index) in options"
        :key="index"
        @click="chooseItem(index)"
        >{{ item }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "TabPopup",
  props: {
    options: {
      type: Array,
      required: true,
    },
  },

  data() {
    return {
      currentIndex: 0,
      showOptionsFlag: false,
    };
  },
  methods: {
    showOptions() {
      this.showOptionsFlag = !this.showOptionsFlag;
    },
    chooseItem(index) {
      this.currentIndex = index;
      this.showOptionsFlag = false;
      this.$emit("chooseItem", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.TabPopup {
  color: #000;
  position: relative;
  margin-top: 20rpx;
  margin-right: 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  .TabTitle {
    display: flex;
    align-items: center;
    .arrowIcon {
      width: 40rpx;
      height: 40rpx;
      margin: 0 5rpx;
      margin-top: 5rpx;
      transition: transform 0.5s;
    }
    .arrowActive {
      transform: rotateZ(180deg);
    }
  }
  .optionsContainer {
    position: absolute;
    bottom: -240rpx;
    left: -10rpx;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
    opacity: 0;
    transform: translateY(50rpx);
    transition: all 0.5s;

    border-radius: 10rpx;
  }
  .topArrow {
    position: absolute;
    left: 20rpx;
    top: -10rpx;
    border-top: 20rpx solid #fff;
    border-bottom: 20rpx solid transparent;
    border-right: 20rpx solid transparent;
    transform: rotateZ(45deg);
  }
  .item {
    text-align: center;
    width: 160rpx;
    margin: 10rpx 20rpx;
    border-bottom: 1px solid #eee;
  }
  .item:active {
    background-color: #eee;
  }
  .optionsShow {
    opacity: 1;
    z-index: 10;
    transform: translateY(0);
  }
}
</style>
